<template>
    <div>
   <div ref="chart" style="width: 600px; height: 400px;"></div>
 </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';

export default {
 data() {
   return {
     chart: null,
     chartData: []
   };
 },
 mounted() {
   this.fetchChartData();
 },
 methods: {
   fetchChartData() {
     axios.get('/manage/vm/echarts/bie')
       .then(response => {
         this.chartData = response.data.barList;
         this.initChart();
       })
       .catch(error => {
         console.error('Error fetching chart data:', error);
       });
   },
   initChart() {
    var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '试试',
    subtext: '看看',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '分类',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '饮料机' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
   }
 }
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>
